import React from "react"
import { Text, Navigator, ScrollView, View } from "@tarojs/components"
import { Search, DropdownMenu, Cell, Button, Sticky } from "@taroify/core"
import { Success } from "@taroify/icons"
import GpContainer from "@/components/GpContainer"
import GpIcon from "@/components/GpFontIcon"
import { cloneDeep, setPageMeta } from "@/utils/common"
import GpSchoolItem from "@/components/GpSchoolItem"
import GpJumpNavs from "@/components/GpJumpNavs"
import GpCurrentPort from "@/components/GpCurrentPort"
import clsx from "clsx"
import GpSimpleTabbar from "@/components/GpSimpleTabbar"
import GpScrollLoading from "@/components/GpScrollLoading"
import Taro from "@tarojs/taro"
import { getSchoolFilters, getSchoolList } from "@/apis/index"
import GpEmpty from "@/components/GpEmpty"
import { NO_RESTRICT } from "@/constants/words"
import { commonUrls } from "@/utils/router"
import styles from "@/styles/common/top-fixed.module.scss"
import myStyles from "./index.module.scss"

const ports = [{ text: "院校查询" }]
const iconSize = Taro.pxTransform(20)
type IState = {
  /** 过滤面板所选择的过滤项 */
  selectedFilterKey: any
  /** 所在地区列表省份 */
  provinceOptions: IDropDownFilterOption[]
  /** 院校类型 */
  natureTypeOptions: IDropDownFilterOption[]
  /** 学历层次 */
  levelOptions: IDropDownFilterOption[]
  /** 艺术专业 */
  projectOptions: IDropDownFilterOption[]
  /** 院校特色 */
  featureOptions: IDropDownFilterOption[]
  keyword: string
  pagination: IPagination
  list: any[]
  showLoading: boolean
}
type IData = {
  pristine_provinceOptions: IDropDownFilterOption[]
  pristine_natureTypeOptions: IDropDownFilterOption[]
  pristine_levelOptions: IDropDownFilterOption[]
  pristine_featureOptions: IDropDownFilterOption[]
  pristine_projectOptions: IDropDownFilterOption[]
  /** 查询参数 院校特色标签 */
  feature: number
  /** 查询参数 所在省的名称 */
  province: string
  /** for setPageInfo */
  pageMeta: {
    /**地区 */
    province: string
    /**专业 */
    profession: string
    /**学历 */
    level: string
    /**特色 */
    feature: string
    /** @ignore */
    pageLoaded: boolean
  }
}
class SchoolQuery extends React.Component<unknown, IState> {
  extData: IData
  constructor(props) {
    super(props)
    this.state = {
      selectedFilterKey: false,
      provinceOptions: [],
      natureTypeOptions: [],
      levelOptions: [],
      featureOptions: [],
      keyword: "",
      pagination: {
        page: 1,
        pageCount: 1
      },
      list: [],
      projectOptions: [],
      showLoading: true
    }
    this.extData = {
      pristine_provinceOptions: [],
      pristine_natureTypeOptions: [],
      pristine_levelOptions: [],
      pristine_featureOptions: [],
      pristine_projectOptions: [],
      feature: 0,
      province: "",
      pageMeta: {
        profession: "",
        province: "",
        level: "",
        feature: "",
        pageLoaded: false
      }
    }
  }
  onShareAppMessage() {}
  collectQuery = (options: Recordable) => {
    this.extData.feature = Number(options.feature)
    this.extData.province = options.province
  }
  onLoad(options: Recordable) {
    this.collectQuery(options)
    this.getFilterOptions().then(() => {
      this.search(1)
    })
  }
  componentDidShow() {
    this.setPageInfo()
  }
  setPageInfo = () => {
    const { province, level, profession, feature, pageLoaded } = this.extData.pageMeta
    // 可能第一次didshow会在search之后执行，为了避免多次执行冲突问题，用pageLoaded作flag
    if (pageLoaded) {
      setPageMeta({
        title: `${province}${profession}艺术${level}${feature}院校有哪些-${province}${profession}大学-择艺宝`,
        description: `择艺宝为你整理${province}${profession}艺术${level}${feature}院校大全，涵盖学校类型，学校区域、学校特色，招生方式等信息，快速查找${province}${profession}大学就上择艺宝`,
        keywords: `${province}${profession}艺术${level}${feature}院校，${province}${profession}大学`
      })
    }
  }
  getPageMetaInfo = ({
    provinces,
    level,
    projects,
    features
  }: {
    provinces: number[]
    level: number[]
    projects: number[]
    features: number[]
  }) => {
    const { provinceOptions, featureOptions, levelOptions, projectOptions } = this.state
    if (provinces && provinces.length > 0) {
      const current = provinceOptions.find(l => l.value === provinces[0])
      this.extData.pageMeta.province = current?.text as string
    } else {
      // checked all
      this.extData.pageMeta.province = "全国"
    }
    if (level && level.length > 0) {
      const current = levelOptions.find(l => l.value === level[0])
      this.extData.pageMeta.level = current?.text as string
    } else {
      // checked all
      this.extData.pageMeta.level = ""
    }
    if (projects && projects.length > 0) {
      const current = projectOptions.find(l => l.value === projects[0])
      this.extData.pageMeta.profession = current?.text as string
    } else {
      this.extData.pageMeta.profession = ""
    }
    if (features && features.length > 0) {
      const current = featureOptions.find(l => l.value === features[0])
      this.extData.pageMeta.feature = current?.text as string
    } else {
      this.extData.pageMeta.feature = ""
    }
    this.extData.pageMeta.pageLoaded = true
    this.setPageInfo()
  }
  getFilterOptions = () => {
    return new Promise(resolve => {
      getSchoolFilters().then(res => {
        if (res.data.success) {
          const { feature, province } = this.extData
          const retData = res.data.data
          const provinceOptions: IDropDownFilterOption[] = (retData.provinceOptions || []).map(
            l => {
              const option: IDropDownFilterOption = {
                text: l.label,
                value: l.value
              }
              if (province && province === l.label) {
                option.checked = true
              }
              return option
            }
          )
          provinceOptions.unshift({
            text: NO_RESTRICT.text,
            value: NO_RESTRICT.value
          })
          const natureTypeOptions: IDropDownFilterOption[] = (retData.natureTypeOptions || []).map(
            l => {
              return {
                text: l.label,
                value: l.value
              }
            }
          )
          natureTypeOptions.unshift({
            text: NO_RESTRICT.text,
            value: NO_RESTRICT.value
          })
          const projectOptions: IDropDownFilterOption[] = (retData.projectOptions || []).map(l => {
            return {
              text: l.label,
              value: l.value
            }
          })
          projectOptions.unshift({
            text: NO_RESTRICT.text,
            value: NO_RESTRICT.value
          })
          const levelOptions: IDropDownFilterOption[] = (retData.levelOptions || []).map(l => {
            return {
              text: l.label,
              value: l.value
            }
          })
          levelOptions.unshift({
            text: NO_RESTRICT.text,
            value: NO_RESTRICT.value
          })
          const featureOptions: IDropDownFilterOption[] = (retData.featureOptions || []).map(l => {
            const option: IDropDownFilterOption = {
              text: l.label,
              value: l.value
            }
            if (feature && feature === l.value) {
              option.checked = true
            }
            return option
          })
          featureOptions.unshift({
            text: NO_RESTRICT.text,
            value: NO_RESTRICT.value
          })
          this.setState(
            {
              provinceOptions,
              natureTypeOptions,
              levelOptions,
              featureOptions,
              projectOptions
            },
            () => {
              resolve(null)
            }
          )
          const pristine_featureOptions = cloneDeep(featureOptions)
          this.unCheckedAll(pristine_featureOptions)
          const pristine_provinceOptions = cloneDeep(provinceOptions)
          this.unCheckedAll(pristine_provinceOptions)
          this.extData.pristine_provinceOptions = pristine_provinceOptions
          this.extData.pristine_natureTypeOptions = cloneDeep(natureTypeOptions)
          this.extData.pristine_levelOptions = cloneDeep(levelOptions)
          this.extData.pristine_featureOptions = pristine_featureOptions
          this.extData.pristine_projectOptions = cloneDeep(projectOptions)
        }
      })
    })
  }
  search = (page = 1, showLoading = true) => {
    if (showLoading) {
      Taro.showLoading()
    }
    const {
      provinceOptions,
      natureTypeOptions,
      featureOptions,
      keyword,
      levelOptions,
      projectOptions
    } = this.state
    const provinces = provinceOptions
      .filter(l => l.checked && l.value !== NO_RESTRICT.value)
      .map(l => l.value)
    const level = levelOptions
      .filter(l => l.checked && l.value !== NO_RESTRICT.value)
      .map(l => l.value)
    const projects = projectOptions
      .filter(l => l.checked && l.value !== NO_RESTRICT.value)
      .map(l => l.value)
    const natures = natureTypeOptions
      .filter(l => l.checked && l.value !== NO_RESTRICT.value)
      .map(l => l.value)
    const features = featureOptions
      .filter(l => l.checked && l.value !== NO_RESTRICT.value)
      .map(l => l.value)
    this.getPageMetaInfo({
      provinces,
      level,
      projects,
      features
    })
    return getSchoolList({
      search: {
        provinces,
        level: level[0],
        natures,
        features,
        keyword,
        projects
      },
      pagination: {
        current: page,
        pageSize: 6
      }
    })
      .then(res => {
        if (res.data.success) {
          const retData = res.data.data
          const retList = retData.list || []
          if (page === 1) {
            this.setState({
              list: retList
            })
          } else {
            this.setState({
              list: this.state.list.concat(retList)
            })
          }
          this.setState({
            pagination: {
              page: retData.pagination.current,
              pageCount: retData.pagination.pageCount
            },
            showLoading: retData.pagination.current + 1 <= retData.pagination.pageCount
          })
        }
      })
      .finally(() => {
        if (showLoading) {
          Taro.hideLoading()
        }
      })
  }
  handleDropdownMenuChange = (filterKey: any) => {
    this.setState({
      selectedFilterKey: filterKey
    })
  }
  unCheckedAll = (list: IDropDownFilterOption[]) => {
    list.forEach(l => {
      l.checked = false
    })
  }
  unCheckedNoRestrict = (list: IDropDownFilterOption[]) => {
    const finder = list.find(l => l.value === NO_RESTRICT.value)
    if (finder && finder.checked) {
      finder.checked = false
    }
  }
  handleClickAddress = (item: IDropDownFilterOption) => {
    const _list = cloneDeep(this.state.provinceOptions)
    const finder = _list.find(l => l.value === item.value)
    if (finder) {
      // 不限
      if (finder.value === NO_RESTRICT.value) {
        const toBeCheced = !finder.checked
        if (toBeCheced) {
          this.unCheckedAll(_list)
          finder.checked = toBeCheced
        } else {
          finder.checked = !finder.checked
        }
      } else {
        this.unCheckedNoRestrict(_list)
        finder.checked = !finder.checked
      }
      this.setState({
        provinceOptions: _list
      })
    }
  }
  handleClickAddress_single = (item: IDropDownFilterOption) => {
    const _list = cloneDeep(this.state.provinceOptions)
    const finder = _list.find(l => l.value === item.value)
    if (finder) {
      const toBeCheced = !finder.checked
      _list.forEach(l => {
        l.checked = false
      })
      finder.checked = toBeCheced
      this.setState(
        {
          provinceOptions: _list,
          selectedFilterKey: false
        },
        () => {
          this.search(1)
        }
      )
    }
  }
  handleClickLevel = (item: IDropDownFilterOption) => {
    const _list = cloneDeep(this.state.levelOptions)
    const finder = _list.find(l => l.value === item.value)
    if (finder) {
      const toBeCheced = !finder.checked
      _list.forEach(l => {
        l.checked = false
      })
      finder.checked = toBeCheced
      this.setState(
        {
          levelOptions: _list,
          selectedFilterKey: false
        },
        () => {
          this.search(1)
        }
      )
    }
  }
  handleClickProject = (item: IDropDownFilterOption) => {
    const _list = cloneDeep(this.state.projectOptions)
    const finder = _list.find(l => l.value === item.value)
    if (finder) {
      const toBeCheced = !finder.checked
      _list.forEach(l => {
        l.checked = false
      })
      finder.checked = toBeCheced
      this.setState(
        {
          projectOptions: _list,
          selectedFilterKey: false
        },
        () => {
          this.search(1)
        }
      )
    }
  }
  handleClickNatureType = (item: IDropDownFilterOption) => {
    const _list = cloneDeep(this.state.natureTypeOptions)
    const finder = _list.find(l => l.value === item.value)
    if (finder) {
      // 不限
      if (finder.value === NO_RESTRICT.value) {
        const toBeCheced = !finder.checked
        if (toBeCheced) {
          this.unCheckedAll(_list)
          finder.checked = toBeCheced
        } else {
          finder.checked = !finder.checked
        }
      } else {
        this.unCheckedNoRestrict(_list)
        finder.checked = !finder.checked
      }
      this.setState({
        natureTypeOptions: _list
      })
    }
  }
  handleClickFeature = (item: IDropDownFilterOption) => {
    const _list = cloneDeep(this.state.featureOptions)
    const finder = _list.find(l => l.value === item.value)
    if (finder) {
      // 不限
      if (finder.value === NO_RESTRICT.value) {
        const toBeCheced = !finder.checked
        if (toBeCheced) {
          this.unCheckedAll(_list)
          finder.checked = toBeCheced
        } else {
          finder.checked = !finder.checked
        }
      } else {
        this.unCheckedNoRestrict(_list)
        finder.checked = !finder.checked
      }
      this.setState({
        featureOptions: _list
      })
    }
  }
  handleClickFeature_single = (item: IDropDownFilterOption) => {
    const _list = cloneDeep(this.state.featureOptions)
    const finder = _list.find(l => l.value === item.value)
    if (finder) {
      const toBeCheced = !finder.checked
      _list.forEach(l => {
        l.checked = false
      })
      finder.checked = toBeCheced
      this.setState(
        {
          featureOptions: _list,
          selectedFilterKey: false
        },
        () => {
          this.search(1)
        }
      )
    }
  }
  onPullDownRefresh() {
    this.search(1, false).finally(() => {
      Taro.stopPullDownRefresh()
    })
  }
  onReachBottom() {
    const { pagination } = this.state
    if (pagination.page + 1 <= pagination.pageCount) {
      this.search(pagination.page + 1, false)
    }
  }
  /** 快捷导航 */
  renderJumpNavs = () => {
    return (
      <View className=" bg-white">
        {/* mt-20px */}
        <GpJumpNavs />
      </View>
    )
  }
  handleKeywordChange = (ev: any) => {
    this.setState({
      keyword: ev.detail.value
    })
  }
  resetAddress = () => {
    this.setState(
      {
        provinceOptions: cloneDeep(this.extData.pristine_provinceOptions),
        selectedFilterKey: false
      },
      () => {
        this.search(1)
      }
    )
  }
  resetNatureType = () => {
    this.setState(
      {
        natureTypeOptions: cloneDeep(this.extData.pristine_natureTypeOptions),
        selectedFilterKey: false
      },
      () => {
        this.search(1)
      }
    )
  }
  resetFeatures = () => {
    this.setState(
      {
        featureOptions: cloneDeep(this.extData.pristine_featureOptions),
        selectedFilterKey: false
      },
      () => {
        this.search(1)
      }
    )
  }
  handleConfirm = () => {
    this.handleDropdownMenuChange(false)
    this.search(1)
  }
  renderListTip = () => {
    const { list } = this.state
    if (list.length === 0) return null
    return (
      <View className="text-center yahei font-normal text-26px text-hex-666 leading-60px">
        暂无更多信息，看看别的内容吧~
      </View>
    )
  }
  render() {
    const {
      list,
      selectedFilterKey,
      provinceOptions,
      natureTypeOptions,
      levelOptions,
      featureOptions,
      keyword,
      projectOptions,
      showLoading
    } = this.state
    return (
      <GpContainer className="SchoolQuery">
        <View className={styles["top-fixed"]}>
          <View className={styles["bg-wrap"]}>
            <View className="w-647px pt-32px mx-auto">
              <Search
                className={clsx(styles["search-input"], "search-input")}
                shape="round"
                placeholder="请输入搜索关键词"
                value={keyword}
                onChange={this.handleKeywordChange}
                onSearch={() => this.search(1)}
                clearable={false}
                hoverClass=""
              />
            </View>
            <View className="flex flex-row justify-between px-52px mt-40px pb-32px">
              <Navigator
                hoverClass="none"
                url={commonUrls.proExplain}
                className="flex flex-col items-center leading-none"
              >
                <GpIcon icon="icon-a-yishuyuanxiao_huaban1" color="#fff" size={44} />
                <Text className="yahei font-normal text-24px text-hex-fff pt-8px">艺术专业</Text>
              </Navigator>
              <Navigator
                hoverClass="none"
                url={commonUrls.introBadge}
                className="flex flex-col items-center leading-none"
              >
                <GpIcon icon="icon-a-zhaoshengjianzhang_huaban1" color="#fff" size={44} />
                <Text className="yahei font-normal text-24px text-hex-fff pt-8px">招生简章</Text>
              </Navigator>
              <Navigator
                hoverClass="none"
                url={commonUrls.columnArticle}
                className="flex flex-col items-center leading-none"
              >
                <GpIcon icon="icon-a-yikaozhuanti_huaban1" color="#fff" size={44} />
                <Text className="yahei font-normal text-24px text-hex-fff pt-8px">艺考专题</Text>
              </Navigator>
              <Navigator
                hoverClass="none"
                url={commonUrls.news}
                className="flex flex-col items-center leading-none"
              >
                <GpIcon icon="icon-a-yikaozixun_huaban1" color="#fff" size={44} />
                <Text className="yahei font-normal text-24px text-hex-fff pt-8px">艺考资讯</Text>
              </Navigator>
            </View>
            <Sticky>
              {/* 下拉选择面板 */}
              <View catchMove>
                <DropdownMenu
                  value={selectedFilterKey}
                  onChange={this.handleDropdownMenuChange}
                  className={clsx(styles["filter-dropdown"], "filter-dropdown")}
                >
                  {/* 单选 */}
                  <DropdownMenu.Item title="所在地区">
                    <View className="flex-1 flex flex-col overflow-hidden">
                      <View className={myStyles["dropdown-list-content"]}>
                        <View className="flex-1">
                          <ScrollView
                            scrollY
                            style={{
                              height: "100%"
                            }}
                          >
                            {provinceOptions.map(l => (
                              <Cell
                                key={l.value}
                                title={l.text}
                                align="center"
                                clickable
                                onClick={() => this.handleClickAddress_single(l)}
                                className={clsx(styles["filter-dropdown-cell"], {
                                  [styles["checked"]]: l.checked
                                })}
                              >
                                {l.checked && (
                                  <Success
                                    color="#1A8CFF"
                                    style={{
                                      fontSize: iconSize
                                    }}
                                  />
                                )}
                              </Cell>
                            ))}
                          </ScrollView>
                        </View>
                      </View>
                      {/* <View className={styles["filter-opt"]}>
                        <Button
                          color="default"
                          style={{ color: "#666666" }}
                          className={styles["filter-opt-btn"]}
                          onClick={this.resetAddress}
                        >
                          重置
                        </Button>
                        <Button
                          style={{ backgroundColor: "#1A8CFF", color: "#fff" }}
                          className={styles["filter-opt-btn"]}
                          onClick={this.handleConfirm}
                        >
                          确认
                        </Button>
                      </View> */}
                    </View>
                  </DropdownMenu.Item>
                  {/* 单选 */}
                  <DropdownMenu.Item title="艺术专业">
                    <View className="flex-1 flex flex-col overflow-hidden">
                      <View className={myStyles["dropdown-list-content"]}>
                        <View className="flex-1">
                          <ScrollView
                            scrollY
                            style={{
                              height: "100%"
                            }}
                          >
                            {projectOptions.map(l => (
                              <Cell
                                key={l.value}
                                title={l.text}
                                align="center"
                                clickable
                                onClick={() => this.handleClickProject(l)}
                                className={clsx(styles["filter-dropdown-cell"], {
                                  [styles["checked"]]: l.checked
                                })}
                              >
                                {l.checked && (
                                  <Success
                                    color="#1A8CFF"
                                    style={{
                                      fontSize: iconSize
                                    }}
                                  />
                                )}
                              </Cell>
                            ))}
                          </ScrollView>
                        </View>
                      </View>
                    </View>
                  </DropdownMenu.Item>
                  {/* 单选 */}
                  <DropdownMenu.Item title="学历层次">
                    <View className="flex-1 flex flex-col overflow-hidden">
                      <View className={myStyles["dropdown-list-content"]}>
                        <View className="flex-1">
                          <ScrollView
                            scrollY
                            style={{
                              height: "100%"
                            }}
                          >
                            {levelOptions.map(l => (
                              <Cell
                                key={l.value}
                                title={l.text}
                                align="center"
                                clickable
                                onClick={() => this.handleClickLevel(l)}
                                className={clsx(styles["filter-dropdown-cell"], {
                                  [styles["checked"]]: l.checked
                                })}
                              >
                                {l.checked && (
                                  <Success
                                    color="#1A8CFF"
                                    style={{
                                      fontSize: iconSize
                                    }}
                                  />
                                )}
                              </Cell>
                            ))}
                          </ScrollView>
                        </View>
                      </View>
                    </View>
                  </DropdownMenu.Item>
                  {/* 多选 */}
                  {/* <DropdownMenu.Item title="院校类型">
                    <View className="flex-1 flex flex-col overflow-hidden">
                      <View className={myStyles["dropdown-list-content"]}>
                        <View className="flex-1">
                          <ScrollView
                            scrollY
                            style={{
                              height: "100%"
                            }}
                          >
                            {natureTypeOptions.map(l => (
                              <Cell
                                key={l.value}
                                title={l.text}
                                align="center"
                                clickable
                                onClick={() => this.handleClickNatureType(l)}
                                className={clsx(styles["filter-dropdown-cell"], {
                                  [styles["checked"]]: l.checked
                                })}
                              >
                                {l.checked && (
                                  <Success
                                    color="#1A8CFF"
                                    style={{
                                      fontSize: iconSize
                                    }}
                                  />
                                )}
                              </Cell>
                            ))}
                          </ScrollView>
                        </View>
                      </View>
                      <View className={styles["filter-opt"]}>
                        <Button
                          color="default"
                          style={{ color: "#666666" }}
                          className={styles["filter-opt-btn"]}
                          onClick={this.resetNatureType}
                        >
                          重置
                        </Button>
                        <Button
                          style={{ backgroundColor: "#1A8CFF", color: "#fff" }}
                          className={styles["filter-opt-btn"]}
                          onClick={this.handleConfirm}
                        >
                          确认
                        </Button>
                      </View>
                    </View>
                  </DropdownMenu.Item> */}
                  {/* 多选 */}
                  <DropdownMenu.Item title="院校特色">
                    <View className="flex-1 flex flex-col overflow-hidden">
                      <View className={myStyles["dropdown-list-content"]}>
                        <View className="flex-1">
                          <ScrollView
                            scrollY
                            style={{
                              height: "100%"
                            }}
                          >
                            {featureOptions.map(l => (
                              <Cell
                                key={l.value}
                                title={l.text}
                                align="center"
                                clickable
                                onClick={() => this.handleClickFeature_single(l)}
                                className={clsx(styles["filter-dropdown-cell"], {
                                  [styles["checked"]]: l.checked
                                })}
                              >
                                {l.checked && (
                                  <Success
                                    color="#1A8CFF"
                                    style={{
                                      fontSize: iconSize
                                    }}
                                  />
                                )}
                              </Cell>
                            ))}
                          </ScrollView>
                        </View>
                      </View>
                      {/* <View className={styles["filter-opt"]}>
                        <Button
                          color="default"
                          style={{ color: "#666666" }}
                          className={styles["filter-opt-btn"]}
                          onClick={this.resetFeatures}
                        >
                          重置
                        </Button>
                        <Button
                          style={{ backgroundColor: "#1A8CFF", color: "#fff" }}
                          className={styles["filter-opt-btn"]}
                          onClick={this.handleConfirm}
                        >
                          确认
                        </Button>
                      </View> */}
                    </View>
                  </DropdownMenu.Item>
                </DropdownMenu>
              </View>
            </Sticky>
          </View>
        </View>
        {/* placeholoder */}
        {/* <View className="pt-396px"></View> */}
        {/* 列表内容 */}
        <View className="flex flex-col bg-hex-fff px-30px mt-20px pb-40px">
          {list.length > 0 ? (
            list.map(l => <GpSchoolItem key={l.id} schoolItem={l} />)
          ) : (
            <GpEmpty description="暂无数据" />
          )}
        </View>
        {showLoading ? (
          <GpScrollLoading />
        ) : (
          <React.Fragment>
            {/* 列表加载完成提示 */}
            {this.renderListTip()}
            {/* 快捷导航 */}
            {this.renderJumpNavs()}
            {/* 当前位置 */}
            <GpCurrentPort ports={ports} />
          </React.Fragment>
        )}
        {/* 底部导航 */}
        <GpSimpleTabbar />
      </GpContainer>
    )
  }
}
export default SchoolQuery
